import styled from "styled-components";
import { Tag, TagProps } from "antd";
import { ReactNode } from "react";

const StyledTag = styled(Tag)`
  display: flex;
  align-items: center;

  .anticon {
    margin-left: 8px;
  }
`;

interface TagPropsNew extends TagProps {
  bgColor?: string;
  titleColor?: string;
  icons?: ReactNode;
}

const CustomTag: React.FC<TagPropsNew> = (props) => (
  <StyledTag
    bordered={false}
    {...props}
    style={{
      backgroundColor: props.bgColor,
      color: props.titleColor,
    }}
  >
    {props.title} {props.icons}
  </StyledTag>
);

export default CustomTag;
